<script setup>
import { getTransitionRawChildren, ref,computed } from 'vue'
import { getVegs } from '../Test';
import { useRouter } from 'vue-router'
const router = useRouter()

const vegs = ref(getVegs())

// vegs的分组数据，去重
const groupVegs = computed(()=>{
  return [...new Set(vegs.value.map(veg=>veg.type))]
})
// alert(groupVegs.value)

function buy(veg) {
  alert(`购买成功:  ${JSON.stringify(veg)}`)
}

function toIntroduce(veg) {
  // alert(`跳转到介绍 页面: ${JSON.stringify(veg)}`)
  router.push({
    path: '/introduce',
    query: {
      id: veg.id
    }
  })
}
</script>

<template>
<div>
  <ul>
    <li v-for="(item, index) in groupVegs" v-bind:key="index">{{ item }}</li>
  </ul>
</div>
  <div v-show="false" v-for="veg in vegs" :key="veg.id">
    <div class="veg" @click="toIntroduce(veg)">
      <img class="vegImg" :src="veg.photo">
      <div class="vegRight">
        <div class="vegName">
          {{ veg.name }}
        </div>
        <div class="vegInfo">
          {{ veg.info }}
        </div>
        <div class="vegBottom">
          <div class="vegPrice">
            {{ veg.price }}
          </div>
          <button class="vegBuy" @click.stop="buy(veg)">
            购买
          </button>
        </div>
        <hr>
      </div>
    </div>
  </div>
</template>


<style>
.veg {
  display: flex;
  width: 400px;
  flex-flow: row nowrap;
  margin-top: 10px;
}

.vegImg {
  width: 100px;
  height: 100px;
  background-color: bisque;
}

.vegRight {
  display: flex;
  flex-flow: column nowrap;
  flex: auto;
  justify-content: space-between;
  margin-left: 5px;
}


.vegName {
  font-size: 20px;
  font-weight: bold;
}

.vegInfo {
  font-size: 15px;
  margin-top: 5px;
}

.vegBottom {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-top: 10px;
}

.vegPrice {
  font-size: 15px;
}

.vegBuy {
  font-size: 15px;
}
</style>